<template>
  <div v-if="show">
    <div class="blog-title">
      <h1 v-html="blogDetail.title"></h1>
      <div class="user-info">
        <div class="user-avatar">
          <el-avatar size="small" :src="blogDetail.user.avatar"></el-avatar>&nbsp;&nbsp;
          <span>{{ blogDetail.user.nickname ? blogDetail.user.nickname : blogDetail.user.username }}</span>
        </div>
        <div>
          <i class="el-icon-time"></i>
          <span>{{ blogDetail.createTime }}</span>
        </div>
        <div>
          <i class="el-icon-view"></i>
          <span>{{ blogDetail.views ? blogDetail.views : 0 }}</span>
        </div>
        <div>
          <i class="iconfont icon-xianxingyumaobi icon-my"></i>
          <span>{{ blogDetail.title.length + blogDetail.content.length }} 字数</span>
        </div>
        <div>
          <i class="el-icon-chat-square"></i>
          <span>{{ commentList.length ? commentList.length : "暂无评论" }}</span>
        </div>
        <div>
          <el-link type="success">{{ blogDetail.category.categoryName }}</el-link>
        </div>
      </div>
    </div>
    <div class="blog-content">
      <el-card>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-tooltip class="item" effect="dark" content="返回首页" placement="top">
            <el-breadcrumb-item :to="{path:'/',name:'Index'}"><i class="iconfont icon-shouye1 icon-my"></i>首页
            </el-breadcrumb-item>
          </el-tooltip>
          <el-breadcrumb-item>正文</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="line-numbers" v-html="blogDetail.htmlContent"></div>
        <div class="last-update-time">
          <span>最后修改时间：<i class="el-icon-time"></i>{{ blogDetail.updateTime }}</span>
        </div>
      </el-card>
    </div>
    <div class="share-statement-box" v-if="blogDetail.shareStatement">
      <el-card shadow="hover">
        <div>
          <li>发布作者：{{ blogDetail.user.nickname ? blogDetail.user.nickname : blogDetail.user.username }}</li>
          <li>发表时间：{{ blogDetail.createTime }}</li>
          <li>博客声明：该博客仅供学习参考使用，如有侵犯您的权益，请联系博主删除！</li>
        </div>
      </el-card>
    </div>
    <div class="comment-box" v-if="blogDetail.commentEnable">
      <el-card shadow="hover">
        <div class="comment-list">
          <span class="comment-count">{{ commentList.length ? commentList.length + "条评论" : "暂无评论..." }}</span>
          <div class="comment-item" v-for="item in commentList" :key="item.id">
            <div class="comment-user-info">
              <div class="comment-avatar">
                <el-avatar shape="square" size="medium" :src="item.user.avatar"></el-avatar>
                <el-tooltip effect="dark" content="博主" placement="right"
                            v-if="item.user.id == blogDetail.user.id">
                  <div class="blogger-flag">
                    <img :src="bloggerFlag" alt="" width="100%">
                  </div>
                </el-tooltip>
              </div>
              <div class="comment-user-name-time">
                <span class="comment-username">{{ item.user.nickname ? item.user.nickname : item.user.username }}</span>
                <span class="comment-time">{{ new Date(item.createTime).format("yyyy年MM月dd日 hh:mm") }}</span>
              </div>
            </div>
            <div class="comment-content">
              <p>{{ item.content }}</p>
              <el-tag type="success" effect="dark" size="mini" @click="replayClick(item.id , item.user)">回复</el-tag>
              <div class="comment-item" v-for="replay in item.childCommentList" :key="replay.id">
                <div class="comment-user-info">
                  <div class="comment-avatar">
                    <el-avatar shape="square" size="medium" :src="replay.user.avatar"></el-avatar>
                    <el-tooltip effect="dark" content="博主" placement="right"
                                v-if="replay.user.id == blogDetail.user.id">
                      <div class="blogger-flag">
                        <img :src="bloggerFlag" alt="" width="100%">
                      </div>
                    </el-tooltip>
                  </div>
                  <div class="comment-user-name-time">
                    <span
                      class="comment-username">{{
                        replay.user.nickname ? replay.user.nickname : replay.user.username
                      }}</span>
                    <span class="comment-time">{{ new Date(replay.createTime).format("yyyy年MM月dd日 hh:mm") }}</span>
                  </div>
                </div>
                <div class="comment-content">
                  <p>{{ replay.content }}</p>
                  <el-tag type="success" effect="dark" size="mini" @click="replayClick(replay.id , replay.user)">回复
                  </el-tag>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="comment-replay">
          <div class="comment-replay-title">
            <span>发表评论</span>
            <transition name="el-zoom-in-center">
              <el-tag closable type="success" v-show="replayUser" effect="dark" size="small" style="margin-left: 20px"
                      @close="cancelReplay">
                {{ replayUser }}
              </el-tag>
            </transition>
          </div>
          <el-form :model="commentForm" ref="commentForm" :rules="commentRules">
            <el-form-item prop="content">
              <el-input type="textarea" v-model.trim="commentForm.content" :rows="5"
                        :placeholder="inputPlaceholder"></el-input>
            </el-form-item>
            <el-form-item style="text-align: right;">
              <el-button type="primary" size="small" @click="resetForm('commentForm')"><i
                class="el-icon-refresh btn-icon"></i>重置
              </el-button>
              <el-button type="success" size="small" @click="sendComment('commentForm')"><i
                class="iconfont icon-baocun btn-icon"></i>评论
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "BlogDetail",
  data() {
    return {
      bloggerFlag: require("@/assets/image/medal_one.png"),
      show: false,
      blogDetail: {},
      commentList: [],
      commentForm: {
        content: "",
        userId: "",
        blogId: "",
        parentCommentId: ""
      },
      commentRules: {
        content: [
          {required: true, message: "请输入评论内容", trigger: 'blur'},
          {max: 500, message: "最多输入500个字符", trigger: 'blur'}
        ]
      },
      replayUser: "",
      inputPlaceholder: "请输入评论内容..."
    }
  },
  mounted() {
    Prism.highlightAll();
  },
  created() {
    this.getBlogDetail();
  },
  methods: {
    cancelReplay() {
      this.replayUser = "";
      this.inputPlaceholder = "请输入评论内容...";
      this.commentForm.parentCommentId = null;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    sendComment(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!(this.$store.getters.getUserInfo && this.$store.getters.getToken)) {
            this.$notify({
              title: "提示",
              message: "请先登录再评论",
              type: "warning"
            })
            return false;
          }
          this.commentForm.userId = this.$store.getters.getUserInfo.id;
          this.commentForm.blogId = this.blogDetail.id;
          this.$put(this.$api.SAVE_COMMENT_URL, this.commentForm).then(res => {
            if (res.data.code == 200) {
              this.$notify({
                title: "提示",
                message: res.data.message,
                type: "success"
              });
              this.getCommentList(this.blogDetail.id);
              this.cancelReplay();
              this.commentForm.content = "";
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    replayClick(parentId, replayUserInfo) {
      this.commentForm.parentCommentId = parentId;
      this.replayUser = "@" + (replayUserInfo.nickname ? replayUserInfo.nickname : replayUserInfo.username);
      this.inputPlaceholder = "@" + (replayUserInfo.nickname ? replayUserInfo.nickname : replayUserInfo.username) + "...";
      this.commentForm.parentCommentId = parentId;
    },
    getCommentList(id) {
      this.$get(this.$api.COMMENT_LIST_URL + `/${id}`, {}).then(res => {
        if (res.data.code == 200) {
          this.commentList = res.data.data;
        }
      })
    },
    getBlogDetail() {
      this.$get(this.$api.BLOG_DETAIL_URL, {
        blogId: this.$route.params.id,
      }).then(res => {
        if (res.data.code == 200) {
          this.blogDetail = res.data.data;
          this.$nextTick(() => {
            setTimeout(() => {
              Prism.highlightAll();
            }, 0)
          })
          if (this.blogDetail.commentEnable) {
            this.getCommentList(this.blogDetail.id);
          }
          this.show = true;
        }
      })
    }
  }
}
</script>

<style scoped>
.blog-title {
  text-align: center;
}

.blog-title > h1 {
  font-weight: 100;
  font-size: 27px;
}

.user-info {
  display: flex;
  justify-content: center;
  align-items: center;
}

.user-info > div {
  font-size: 15px;
  margin-left: 20px;
  color: #a0a0a0;
}

.user-info > div > i {
  margin-right: 5px;
}

.user-avatar {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.icon-my {
  font-size: 15px;
}

.blog-content {
  margin-top: 20px;
}

.share-statement-box {
  margin-top: 20px;
}

.comment-box {
  margin-top: 20px;
}

.comment-count {
  font-size: 18px;
}

.comment-item {
  margin-top: 20px;
}

.comment-user-info {
  display: flex;
}

.comment-user-info .el-avatar {
  cursor: pointer;
}

.comment-avatar {
  position: relative;
}

.comment-avatar .blogger-flag {
  position: absolute;
  bottom: 3px;
  right: 0px;
  width: 17px;
  height: 17px;
}

.comment-user-name-time {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}

.comment-user-name-time .comment-username {
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
}

.comment-user-name-time .comment-time {
  font-size: 10px;
  color: #a0a0a0;
}

.comment-content {
  margin-left: 3em;
}

.comment-content .el-tag {
  cursor: pointer;
}

.comment-content .el-tag:hover {
  background: #5bb032;
  transition: background-color .3s;
}

.comment-replay {
  margin-top: 50px;
}

.btn-icon {
  font-size: 16px;
  margin-right: 5px;
}

.comment-replay-title {
  font-size: 18px;
  color: #777777;
  display: block;
  margin-bottom: 10px;
}

.last-update-time {
  padding-left: 20px;
}

.last-update-time > span {
  font-size: 12px;
  color: #cdc3c3;
}
</style>
